<template>
  <div class="app">
    <h1>待办事项列表</h1>
    <AddTodo @add-todo="addTodo" />
    <TodoList 
      :todos="todos"
      @toggle-todo="toggleTodo"
      @delete-todo="deleteTodo"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AddTodo from './components/AddTodo.vue';
import TodoList from './components/TodoList.vue';

// 定义响应式的任务列表
const todos = ref([]);

// 页面加载时从localStorage读取数据
onMounted(() => {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos);
  }
});

// 保存任务列表到localStorage
const saveTodos = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value));
};

// 添加新任务
const addTodo = (text) => {
  const newTodo = {
    id: Date.now(), // 使用时间戳作为唯一ID
    text: text,
    completed: false
  };
  todos.value.push(newTodo);
  saveTodos();
};

// 切换任务完成状态
const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id);
  if (todo) {
    todo.completed = !todo.completed;
    saveTodos();
  }
};

// 删除任务
const deleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id);
  saveTodos();
};
</script>

<style scoped>
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}
</style>
    